<template>
	<view>
		<view class="flex flex-direction align-center justify-center">
			<view class="flex flex-direction align-center justify-center margin-top-xl">
				<view style="max-width: 300rpx;">
					<image src="@/static/logo.png" mode="widthFix"></image>
				</view>
				<view class="text-xl padding">
					<view class="text-black text-bold">登录体验更多精彩</view>
				</view>
			</view>


			<!-- ifdef MP-WEIXIN -->
			<view class="margin-top-xl padding-lr-xl w-100">
				<button class="wx-btn text-df text-white text-bold radius text-center w-100 bg-green"
					@click="wxLogin" hover-class="wx-btn-hover">微信登录
				</button>
			</view>
			<!-- endif -->
			<!--			<view class="padding-tb padding-lr-xl w-100">-->
			<!--				<button class="yx-btn text-df text-bold radius text-center w-100" @click="yxLogin"-->
			<!--					hover-class="yx-btn-hover">邮箱登录-->
			<!--				</button>-->
			<!--			</view>-->
			<view class="margin-top">
				<agreement :checked.sync="isAgree" ref="agreement"></agreement>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animation: '', // 动画样式
				isAgree: false
			};
		},
		methods: {
			checkAgree() {
				if (!this.isAgree) {
					this.$refs.agreement.shake()
					return false
				}
				return true
			},
			wxLogin(res) {
				console.log("wxLogin", res)
				if (!this.checkAgree()) return

        uni.getUserProfile({
          desc:'同步阅读记录，数据永不丢失',
          success:(res)=>{
            console.log(res)
            this.$api.wxGetUserinfo({
              encryptedData: res.encryptedData,
              iv: res.iv
            }).then(res => {
              console.log(res)
              this.$store.commit("user/setUserinfo", res)
              uni.navigateBack({
                delta: 1
              });
            })
          },
          fail:(err=>{
            uni.showToast({
              icon: 'none',
              title: "您点击了拒绝",
              duration: 3000
            })
          })
        })



			},
			yxLogin() {
				// if (!this.checkAgree()) return
				uni.navigateTo({
					url: './email'
				})
			}
		}
	}
</script>

<style lang="scss">
	.checkbox-wrap {
		width: 100%
	}


	.wx-btn {
		margin-bottom: 0;
		max-width: 700upx;

		&:hover {
			background-color: darken(#39b54a, 5%);
		}
	}

	.wx-btn-hover {
		background-color: darken(#39b54a, 5%);

	}

	.yx-btn {
		max-width: 700upx;
		border: 1upx solid #dedede;

		&:hover {
			background-color: darken(#0081ff, 5%);
		}
	}

	.yx-btn-hover {
		background-color: darken(#0081ff, 5%);
	}
</style>
